import dataPool from "./dataPool"
import {init} from "../node_modules/snabbdom/build/init"
import {h} from "../node_modules/snabbdom/build/h"
import {classModule} from "../node_modules/snabbdom/build/modules/class"
import {propsModule} from "../node_modules/snabbdom/build/modules/props"
import {styleModule} from "../node_modules/snabbdom/build/modules/style"
import {eventListenersModule} from "../node_modules/snabbdom/build/modules/eventlisteners"

const path=init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
])


let _factoryId=1
function getFactoryId(){
    let id=_factoryId
    _factoryId++
    return id
}

let oldNode=document.querySelector("#app")
/**
 * 排序类型 id，name,hot，win , appear
 */
let sortType="id" 
function changeSortType(type){
    if(sortType===type){
        return
    }
    sortType=type
    if(type=="id" || type=="name" || type=="hot"){
        //从小到大排序
        datas.sort((a,b)=>{
            if(a[type]>b[type]){
                return 1
            }else if(a[type]<b[type]){
                return -1
            }else {
                return 0
            }
        })
    }else { //从大到小排序
        datas.sort((a,b)=>{
            if(a[type]>b[type]){
                return -1
            }else if(a[type]<b[type]){
                return 1
            }else{
                return 0
            }
        })
    }
    updatePage()

}

let datas=[]
//初始化datas
for(let i=0;i<10;i++){
    let data={}
    let o=dataPool[i]
    Object.keys(o).forEach(key=>{
        data[key]=o[key]
    })
    data.id=getFactoryId()
    datas.push(data)
}
//添加data
function addData(){
    let i=Math.floor(Math.random()*dataPool.length)
    let data={}
    let o=dataPool[i]
    Object.keys(o).forEach(key=>{
        data[key]=o[key]
    })

    data.id=getFactoryId()
    datas.unshift(data)
    updatePage()
}
//删除data
function removeData(data){
    let i=datas.indexOf(data)
    if(i>=0){
        datas.splice(i,1)
    }
    updatePage()
}

/**
 * 生成整个页面的虚拟dom
 */
function renderView(){
    return h("div.container",[
        renderHead(),
        renderButtons(),
        renderListHead(),
        renderList()
    ])
}
//标题
function renderHead(){
    return h("h1","王者荣耀胜率榜")
}
//排序和添加按钮
function renderButtons(){
    return h("div.box",[
        h("span","排序："),
        h("input.btn",{
            props:{
                type:"button",
                value:"ID",
            },
            class:{
                btnselected:sortType==="id",
            },
            on:{
                click(){
                    changeSortType("id")
                }
            }
        }),
        h("input.btn",{
            props:{
                type:"button",
                value:"名字",
            },
            class:{
                btnselected:sortType==="name",
            },
            on:{
                click(){
                    changeSortType("name")
                }
            }
        }),
        h("input.btn",{
            props:{
                type:"button",
                value:"热度",
            },
            class:{
                btnselected:sortType==="hot",
            },
            on:{
                click(){
                    changeSortType("hot")
                }
            }
        }),
        h("input.btn",{
            props:{
                type:"button",
                value:"胜率",
            },
            class:{
                btnselected:sortType==="win",
            },
            on:{
                click(){
                    changeSortType("win")
                }
            }
        }),
        h("input.btn",{
            props:{
                type:"button",
                value:"出场率",
            },
            class:{
                btnselected:sortType==="appear",
            },
            on:{
                click(){
                    changeSortType("appear")
                }
            }
        }),
        h("input.btn.rightitem",{
            props:{
                type:"button",
                value:"添加",
            },
            on:{
                click(){
                    addData()
                }
            }
        }),
    ])
}
//列表的头
function renderListHead(){
    return h("div.box2",[
        h("div.itemid","ID"),
        h("div.itemname","名字"),
        h("div.itemid","热度"),
        h("div.itempercent","胜率"),
        h("div.itempercent","出场率")
    ])
}
//列表
function renderList(){
    return h("div.list",{
        style:{
            height:String(listHeight)+"px",
        }
    },datas.map(data=>{
        return renderItem(data)
    }))
}
//列表的项目
function renderItem(data){
    return h("div.item",{
        key:data.id,
        style: {
            opacity: "0",
            transform: "translate(-200px)",
            delayed: { transform: `translateY(${data.y}px)`, opacity: "1" },
            remove: {
              opacity: "0",
              transform: `translateY(${data.y}px) translateX(200px)`,
            },
          },
    },[
        h("div.itemid",String(data.id)),
        h("div.itemname",data.name),
        h("div.itemid","h"+data.hot),
        h("div.itempercent",String(data.win)+"%"),
        h("div.itempercent",String(data.appear)+"%"),
        h("input.itembtn",{
            props:{
                type:"button",
                value:"X"
            },
            on:{
                click(){
                    removeData(data)
                }
            },
            
            
        })
    ])
}

let listHeight=0
//更新整个页面
function updatePage(){
    //计算每个元素的位置
    for(let i=0;i<datas.length;i++){
        let data=datas[i]
        data.y=i*51
    }
    listHeight=datas.length*51
    oldNode=path(oldNode,renderView())
}





updatePage()